import React, {useEffect, useState} from "react";
import {Card, Col, Row, Space, Statistic} from "antd";
import {Area} from "@ant-design/charts";
import {SummaryDayStockIn, SummaryDayStockInData} from "@/services/report/typings";
import {getSummaryDayStockIn, getSummaryDayStockInData} from "@/services/report/api";
import {formatDate} from "@/tools/TimeUtil";

const StockInVisual: React.FC=()=>{
  const date=new Date();
  date.setDate(date.getDate()-1);
  const endTime=formatDate(date);
  const [areaData, setAreaData] = useState<SummaryDayStockIn[]>();
  const [data, setData] = useState<SummaryDayStockInData>()
  const loadData=async ()=>{
    const res = await getSummaryDayStockIn({endDate: endTime,deltaTime: 7});
    setAreaData(res.data);

    const resData = await getSummaryDayStockInData({endDate: endTime})
    setData(resData.data);
  }
  useEffect(() => {
    loadData();
  }, []);
  return (
    <>
      <Space direction="vertical" style={{ display: 'flex' }}>
      <Row gutter={16}>
        <Col span={8}>
          <Card>
          <Statistic title="入库单数量" value={data?.orderNum} />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
          <Statistic title="入库货品数量" value={data?.goodsNum} />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
          <Statistic title="入库货品固定金额" value={data?.goodsAmountGd} />
          </Card>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={24}>
          <Card title='近七日仓库入货单数量'>
            <Area {...{
              data: areaData,
              xField: (d: SummaryDayStockIn) =>(d?.time || ""),
              yField: 'orderNum',
              colorField: 'warehouseName',
              shapeField: 'smooth',
              stack: true,
            }}/>
          </Card>

        </Col>
      </Row>
      </Space>
    </>
  )
}
export default StockInVisual;
